<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    #include("common/header.html")
</head>

<body>
<div style="margin: 15px;">

    #if($info)
    <blockquote class="layui-elem-quote">
        <p>当前观看直播人数: $!{info.total}人</p>
    </blockquote>
    #end
    
    <div class="layui-form" id="form">

        <div class="layui-form-item">
            <label class="layui-form-label">封面图片</label>
            <div class="layui-input-block">
                <img id="imgUrl" src="/admin$!{info.imgUrl}" data-src="$!{info.imgUrl}" height="200px" width="200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <input type="file" name="file" class="layui-upload-file">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间名称</label>
            <div class="layui-input-block">
                <input type="text" id="title" value="$!{info.title}" lay-verify="title" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否开播</label>
            <div class="layui-input-block">
                #if($!info.isOpen == 0)
                <input type="checkbox" name="close" id="isOpen" lay-skin="switch" lay-text="开|关">
                #elseif($!info.isOpen == 1)
                <input type="checkbox" name="open" id="isOpen" lay-skin="switch" lay-text="开|关" checked>
                #else
                <input type="checkbox" name="close" id="isOpen" lay-skin="switch" lay-text="开|关">
                #end
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                #if(!$info)
                <button class="layui-btn" onclick="create()">确认创建直播间</button>
                #else
                <button class="layui-btn" onclick="ok()">确定修改信息</button>
                #end
            </div>
        </div>
    </div>
</div>
<script>

    var layer;
    var form;
    layui.use(['layer','form', 'upload'], function () {
        layer = layui.layer;
        form = layui.form()

        layui.upload({
            url: '/admin/upload/',
            success: function (res) {

                if(res.code == -1){
                    return;
                }

                $("#imgUrl").attr("src","/admin" + res.data);
                $("#imgUrl").attr("data-src",res.data);
                console.log(res); //上传成功返回值，必须为json格式
            }
        });
    });

    function ok() {

        var title = $.trim($("#title").val());
        var imgUrl = $("#imgUrl").attr("data-src");
        var isOpen = document.getElementById("isOpen").checked;

        if(title == ""){
            layer.msg("直播间标题不能为空!");
            return;
        }

        if(imgUrl == ""){
            layer.msg("封面不能为空!");
            return;
        }

        (document.getElementById("isOpen").checked == true) ? isOpen = 1 : isOpen = 0;

        $.ajax({
            url: "/admin/live/",
            type: "put",
            dataType: "json",
            data: {
                "id": $info.id,
                "title": title,
                "imgUrl":imgUrl,
                "isOpen":isOpen
            },
            success: function (r) {
                console.log(r);

                if (r.code == -1) {
                    layer.msg(r.msg);
                    return;
                }

                layer.msg('修改成功!', {time: 1000}, function () {
                    location.reload();
                });
            }
        });

    }
    
    function create() {

        var title = $.trim($("#title").val());
        var imgUrl = $("#imgUrl").attr("data-src");
        var isOpen = 0;

        if(title == ""){
            layer.msg("直播间标题不能为空!");
            return;
        }

        if(imgUrl == ""){
            layer.msg("封面不能为空!");
            return;
        }

        (document.getElementById("isOpen").checked == true) ? isOpen = 1 : isOpen = 0;

        $.ajax({
            url: "/admin/live/",
            type: "post",
            dataType: "json",
            data: {
                "title": title,
                "imgUrl":imgUrl,
                "isOpen":isOpen
            },
            success: function (r) {
                console.log(r);

                if (r.code == -1) {
                    layer.msg(r.msg);
                    return;
                }

                layer.msg('创建成功!', {time: 1000}, function () {
                    location.reload();
                });
            }
        });
    }

</script>
</body>

</html>